import React from 'react'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'
import * as articleActionCreators from '../store/actionCreators/article'


function Editor(props) {

  const { editorUpdate, editorSubmit } = props
  let history = useHistory()
  const [inputVal, setInputVal] = React.useState('')
  const [title, setTitle] = React.useState('')
  const [body, setBody] = React.useState('')
  const [description, setDescription] = React.useState('')
  const [tagList, setTagList] = React.useState([])
  

  const keyupEnter = function (e) {
    const { keyCode } = e
    if (keyCode === 13) {
      if (!tagList.includes(inputVal) && inputVal) {
        setTagList([inputVal, ...tagList])
        setInputVal('')
      }
    }
  }

  const submit = function () {
    if (!title) {
      return alert('title not empty')
    }
    editorSubmit({
      title,
      body,
      description,
      tagList
    }, history)
  }

  const removeTagHandler = function (tag) {
    editorUpdate('tagList', tagList.filter(item => tag !== item))
  }

  return (
    <div className="editor-page">
      <div className="container page">
        <div className="row">
          <div className="col-md-10 offset-md-1 col-xs-12">
            <form>
              <fieldset>
                <fieldset className="form-group">
                  <input
                    onChange={e=> setTitle(e.target.value)}
                    value={title}
                    type="text"
                    className="form-control form-control-lg"
                    placeholder="Article Title" />
                </fieldset>
                <fieldset className="form-group">
                  <input
                    onChange={e=> setBody(e.target.value)}
                    value={body}
                    type="text"
                    className="form-control"
                    placeholder="What's this article about?" />
                </fieldset>
                <fieldset className="form-group">
                  <textarea
                    className="form-control"
                    rows="8"
                    placeholder="Write your article (in markdown)"
                    onChange={e=> setDescription(e.target.value)}
                    value={description}
                  />
                </fieldset>
                <fieldset className="form-group">
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Enter tags"
                    value={inputVal}
                    onChange={e => setInputVal(e.target.value)}
                    onKeyUp={keyupEnter}
                  />
                  <div className="tag-list">
                    {
                      (tagList || []).map((tag, index) => {
                        return (
                          <span className='tag-default tag-pill' key={tag + index}>
                            <i className='ion-close-round'
                              onClick={() => removeTagHandler(tag)} />
                            {tag}
                          </span>
                        )
                      })
                    }
                  </div>
                </fieldset>
                <button className="btn btn-lg pull-xs-right btn-primary" type="button" onClick={submit}>
                  Publish Article
                </button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = state => ({
})

const mapDispatchToProps = dispatch => ({
  editorSubmit: function (article, history) {
    dispatch(articleActionCreators.createArticle(article, history))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Editor)